<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  Import 和 Require 的区别 |   写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          <article class="post">
  
	<div class="post-header">

	<p class="post-title">	
		import 和 require 的区别
	</p>
			

	<div class="meta-info">	
	<span>
		8月 13, 2019
	</span>

	
	
		<i class="iconfont icon-words"></i>
		<span>
			4991
		</span>
	
</div>

</div> 
	 

	  <div class="post-content slideDownMin">

		

			
					<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>  我们在平时的前端开发中,都是用的 <code>import xxx from xxx</code> 进行模块导入.这几天笔者在学习Koa的开发,这里面大量涉及到Node.js的操作.而在Node.js的开发中,都是通过 <code>cosnt xxx = require(xxx)</code> 这种方式来进行模块导入.那么当前台后台在一起开发的时候,我常常把他们弄混.可能是太菜了😢,所以我花了半天的时间去学习了解他们两者的区别.<a id="more"></a></p>
<h2 id="import属于-ES6-规范"><a href="#import属于-ES6-规范" class="headerlink" title="import属于 ES6 规范"></a>import属于 ES6 规范</h2><h3 id="import"><a href="#import" class="headerlink" title="import"></a>import</h3><p>  import是在编译过程中加载,也就是说是在代码执行前执行,比如说,import后面的路径写错了,在运行代码前就会抛错,所以在编写代码时,必须放在模块顶部(import是静态执行的).</p>
<h3 id="import-的导入方式"><a href="#import-的导入方式" class="headerlink" title="import 的导入方式"></a>import 的导入方式</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> foo <span class="keyword">from</span> <span class="string">'./output'</span></span><br><span class="line"><span class="keyword">import</span> &#123;b <span class="keyword">as</span> B&#125; <span class="keyword">from</span> <span class="string">'./output'</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> OBj <span class="keyword">from</span> <span class="string">'./output'</span></span><br><span class="line"><span class="keyword">import</span> &#123;a&#125; <span class="keyword">from</span> <span class="string">'./output'</span></span><br><span class="line"><span class="keyword">import</span> &#123;b <span class="keyword">as</span> BB&#125; <span class="keyword">from</span> <span class="string">'./output'</span></span><br><span class="line"><span class="keyword">import</span> c, &#123;d&#125; <span class="keyword">from</span> <span class="string">'./output'</span></span><br></pre></td></tr></table></figure>
<p>以上导入方式会在下面👇一一解释</p>
<h3 id="exoprt和export-default"><a href="#exoprt和export-default" class="headerlink" title="exoprt和export default"></a>exoprt和export default</h3><p>  相对于import(导入),则应该有导出,那就是exoprt和export default.同样的,他们也是ES6规范.export是导出,export dafault是默认导出,一个模块可以有多个export,但是只能有一个export default,export default可以和多个export共存.export default 为默认导出,导出的是用{}包裹的一个对象,以键值对的形式存在.<br>  我们来看一下下面这个export例子:<br>  导出：<br>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ouput.js</span></span><br><span class="line">  <span class="keyword">const</span> info = <span class="string">'hhhh'</span>;</span><br><span class="line">  <span class="keyword">export</span> &#123; info &#125;;</span><br></pre></td></tr></table></figure></p>
<p>导入：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//input.js</span></span><br><span class="line"> <span class="keyword">import</span> &#123; info &#125; <span class="keyword">from</span> <span class="string">'./output.js'</span><span class="comment">//此处的import &#123;info&#125;和export &#123;info&#125;,两个a是一一对应关系</span></span><br><span class="line"> <span class="built_in">console</span>.log(info);<span class="comment">//'hhhh'</span></span><br></pre></td></tr></table></figure></p>
<p>注意,上面的export {info}导出的info,和import {info}导入的info是同一个info.<br>我们再来看看export default的例子:<br>导出：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//output.js</span></span><br><span class="line">    <span class="keyword">const</span> info = <span class="string">'hhhh'</span>;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123; info &#125;;</span><br></pre></td></tr></table></figure></p>
<p>导入:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//input.js</span></span><br><span class="line"> <span class="keyword">import</span> info <span class="keyword">from</span> <span class="string">'./output.js'</span><span class="comment">//此处的info和export default&#123;info&#125;,不是同一个info,</span></span><br><span class="line"> <span class="built_in">console</span>.log(info);<span class="comment">//'hhhh'</span></span><br></pre></td></tr></table></figure></p>
<p>那意思就是我们只是导入的是一个info的引用,我们也可以这样用:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//input.js</span></span><br><span class="line"> <span class="keyword">import</span> otherName <span class="keyword">from</span> <span class="string">'./output.js'</span></span><br><span class="line"> <span class="built_in">console</span>.log(otherName);<span class="comment">//'hhhh'</span></span><br></pre></td></tr></table></figure>
<p>也可以达到相同的效果.这里import导入的是export default下的对象,叫什么名字都可以,因为只会存在一个export default.</p>
<h3 id="exoprt和export-default混合使用"><a href="#exoprt和export-default混合使用" class="headerlink" title="exoprt和export default混合使用"></a>exoprt和export default混合使用</h3><p> 实际上,export和export fault是可以同时使用的,请看下面这个例子:</p>
<p>导出:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//output.js</span></span><br><span class="line">  <span class="keyword">const</span> a = <span class="string">'info1'</span>;</span><br><span class="line">  <span class="keyword">const</span> b = <span class="string">'info2'</span>;</span><br><span class="line">  <span class="keyword">const</span> c = <span class="string">'info3'</span>;</span><br><span class="line">  <span class="keyword">const</span> d = <span class="string">'info4'</span>;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">printC</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`printC执行,c的值是<span class="subst">$&#123;c&#125;</span>`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">export</span> &#123; a &#125;;</span><br><span class="line">  <span class="keyword">export</span> &#123; b &#125;;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123; b , d , printC &#125;;</span><br></pre></td></tr></table></figure></p>
<p>导入:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//input.js</span></span><br><span class="line">  <span class="keyword">import</span> obj, &#123;a,b &#125; <span class="keyword">from</span> <span class="string">'./output'</span></span><br><span class="line">  <span class="built_in">console</span>.log(a); <span class="comment">//info1</span></span><br><span class="line">  <span class="built_in">console</span>.log(b); <span class="comment">//info2</span></span><br><span class="line">  <span class="built_in">console</span>.log(obj); <span class="comment">//&#123; b: 'info1', d: 'info4', printC: [Function: printC] &#125;</span></span><br></pre></td></tr></table></figure></p>
<h3 id="as-重命名"><a href="#as-重命名" class="headerlink" title="as 重命名"></a>as 重命名</h3><p>  还是上面的那个例子:</p>
<p>导出:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//output.js</span></span><br><span class="line">  <span class="keyword">const</span> a = <span class="string">'info1'</span>;</span><br><span class="line">  <span class="keyword">const</span> b = <span class="string">'info2'</span>;</span><br><span class="line">  <span class="keyword">const</span> c = <span class="string">'info3'</span>;</span><br><span class="line">  <span class="keyword">const</span> d = <span class="string">'info4'</span>;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">printC</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`printC执行,c的值是<span class="subst">$&#123;c&#125;</span>`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">export</span> &#123; a &#125;;</span><br><span class="line">  <span class="keyword">export</span> &#123; b &#125;;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123; b , d , printC &#125;;</span><br></pre></td></tr></table></figure></p>
<p>导入:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//input.js</span></span><br><span class="line">  <span class="keyword">import</span> &#123;a <span class="keyword">as</span> A&#125; <span class="keyword">from</span> <span class="string">'./output'</span> <span class="comment">// √ 支持,A是将要在input.js中使用的</span></span><br><span class="line">  <span class="keyword">import</span> &#123;* <span class="keyword">as</span> A&#125; <span class="keyword">from</span> <span class="string">'./output'</span><span class="comment">// x 不支持</span></span><br><span class="line">  <span class="keyword">import</span> * <span class="keyword">as</span> obj <span class="keyword">from</span> <span class="string">'./output'</span> <span class="comment">// √ 将模块中所有的 export 和 export default的属性一起导出</span></span><br><span class="line">  <span class="built_in">console</span>.log(A); <span class="comment">//info1</span></span><br><span class="line">  <span class="built_in">console</span>.log(obj); <span class="comment">//&#123; a: 'info1',b: 'info2',default: &#123; b: 'info2', d: 'info4', printC: [Function: printC] &#125; &#125;</span></span><br></pre></td></tr></table></figure>
<p>上面的 <code>import {a as A} from &#39;./output&#39;</code> 是指将’a’导出为别名’A’,在导入的模块中,你就可以使用’A’进行操作.而 <code>import * as obj from &#39;./output&#39;</code> 是将input.js中的所有 export 和 export default 导出的内容组合成一个对象返回.<br>我们来 <code>console</code> 一下上例中 <code>obj</code> 的其他属性:   </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//input.js</span></span><br><span class="line">  <span class="keyword">import</span> * <span class="keyword">as</span> obj <span class="keyword">from</span> <span class="string">'./output'</span> <span class="comment">// √ 将模块中所有的 export 和 export default的属性一起导出</span></span><br><span class="line">  <span class="built_in">console</span>.log(obj);<span class="comment">// &#123; a: 'info1',b: 'info2',default: &#123; b: 'info2', d: 'info4', printC: [Function: printC] &#125; &#125;</span></span><br><span class="line">  <span class="built_in">console</span>.log(obj.a)<span class="comment">// info1</span></span><br><span class="line">  <span class="built_in">console</span>.log(obj.b)<span class="comment">// info2</span></span><br><span class="line">  obj.default.printC() <span class="comment">// printC执行,c的值是info3</span></span><br></pre></td></tr></table></figure>
<p> 为什么这里可以打印出 <code>obj.a</code> 和 <code>obj.b</code> ? 那是因为,我们在output.js里面利用export将这两个属性导出了,别忘记上面那句话:<code>import * as obj from &#39;./output&#39;</code> 是将input.js中的所有 export 和 export default 导出的内容组合成一个对象返回.下面来来看看require.</p>
<h2 id="require-属于-CommonJS-规范"><a href="#require-属于-CommonJS-规范" class="headerlink" title="require 属于 CommonJS 规范"></a>require 属于 CommonJS 规范</h2><h3 id="require"><a href="#require" class="headerlink" title="require"></a>require</h3><p>  require是运行时调用,所以是动态执行的,所以require理论上可以运用在代码的任何地方.所以在性能上会比import差一些.<br>  require导入模块就没那么复杂了,导出时是什么样,导入时就还是什么样.其中,导出可以用:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">exports.xxx = xxx;</span><br><span class="line"><span class="built_in">module</span>.exports = xxx;</span><br></pre></td></tr></table></figure></p>
<p>导入则用 <code>const xxx = require(&#39;xxx&#39;)</code> 即可完成导入.<br>下面我们来看一个例子( <code>module.exports</code> 这种导出方式):<br>导出:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//output.js</span></span><br><span class="line"><span class="keyword">const</span> Name1 = <span class="string">'hhh1'</span>;</span><br><span class="line"><span class="keyword">const</span> Name2 = <span class="string">'hhh2'</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123; </span><br><span class="line">  Name1, </span><br><span class="line">  Name2,</span><br><span class="line">  foo1: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"这是foo1函数!"</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  foo2:<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"这是foo2函数!"</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>导入:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// input.js</span></span><br><span class="line">  <span class="keyword">const</span> test = <span class="built_in">require</span>(<span class="string">'./output.js'</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(test.Name1); <span class="comment">// hhh1</span></span><br><span class="line">  <span class="built_in">console</span>.log(test.Name2); <span class="comment">// hhh2</span></span><br><span class="line">  test.foo1();<span class="comment">// 这是foo1函数!</span></span><br><span class="line">  test.foo2();<span class="comment">// 这是foo2函数!</span></span><br></pre></td></tr></table></figure></p>
<p>我们再来看看 <code>exports.xxx = xxx</code> 这种导出方式:<br>导出:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//output.js</span></span><br><span class="line"><span class="keyword">const</span> Name1 = <span class="string">'hhh1'</span>;</span><br><span class="line"><span class="keyword">const</span> Name2 = <span class="string">'hhh2'</span>;</span><br><span class="line">exports.foo1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"这是foo1函数!"</span>);</span><br><span class="line">&#125;</span><br><span class="line">exports.foo2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"这是foo1函数!"</span>);</span><br><span class="line">&#125;</span><br><span class="line">exports.Name1 = Name1;</span><br><span class="line">exports.Name2 = Name2;</span><br></pre></td></tr></table></figure></p>
<p>导入:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// input.js</span></span><br><span class="line">  <span class="keyword">const</span> test = <span class="built_in">require</span>(<span class="string">'./output.js'</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(test.Name1); <span class="comment">// hhh1</span></span><br><span class="line">  <span class="built_in">console</span>.log(test.Name2); <span class="comment">// hhh2</span></span><br><span class="line">  test.foo1();<span class="comment">// 这是foo1函数!</span></span><br><span class="line">  test.foo2();<span class="comment">// 这是foo2函数!</span></span><br></pre></td></tr></table></figure></p>
<p>但是值得注意的是,<code>exports.xxx = xxx</code> 和 <code>module.exports = xxx;</code>一起使用时, <code>exports.xxx</code> 的属性会失效.我们来看一个例子:<br>导出:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//output.js</span></span><br><span class="line"><span class="keyword">const</span> firstName = <span class="string">'Michael'</span>;</span><br><span class="line"><span class="keyword">const</span> lastName = <span class="string">'Jackson'</span>;</span><br><span class="line"><span class="keyword">const</span> year = <span class="number">1958</span>;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123; </span><br><span class="line">  firstName, </span><br><span class="line">  lastName, </span><br><span class="line">  year </span><br><span class="line">&#125;;</span><br><span class="line">exports.name = <span class="string">'hhhh'</span>;</span><br></pre></td></tr></table></figure></p>
<p>导入:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// input.js</span></span><br><span class="line">  <span class="keyword">const</span> test = <span class="built_in">require</span>(<span class="string">'./output.js'</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(test.firstName);<span class="comment">//Michael</span></span><br><span class="line">  <span class="built_in">console</span>.log(test.lastName);<span class="comment">//Jackson</span></span><br><span class="line">  <span class="built_in">console</span>.log(test.year);<span class="comment">//1958</span></span><br><span class="line">  <span class="built_in">console</span>.log(test.name);<span class="comment">//undefined</span></span><br></pre></td></tr></table></figure></p>
<p>在上面的console中, <code>exports.name = &#39;hhhh&#39;</code>的属性被 <code>module.exports</code>覆盖了,所以失效了.</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ol>
<li>require,exports,module.exports属于CommonJS规范,import,export,export default属于ES6规范</li>
<li>require支持动态导入,动态匹配路径,import对这两者都不支持</li>
<li>require是运行时调用,import是编译时调用</li>
<li>require是赋值过程,import是解构过程</li>
<li>对于export和export default 不同的使用方式,import就要采取不同的引用方式,主要区别在于是否存在{},export导出的,import导入需要{},导入和导出一一对应,export default默认导出的,import导入不需要{}</li>
<li>exports是module.exports一种简写形式,不能直接给exports赋值</li>
<li>当直接给module.exports赋值时,exports会失效.</li>
</ol>
  	
					
	  </div>     
	  

	
<div class="post-meta">
      	

      
        <i class="iconfont icon-tag"></i>     
          <a class="tag-link" href="/tags/ES6/">ES6</a> <a class="tag-link" href="/tags/Node-js/">Node.js</a>    
      	
</div>





<div class="post-footer">
  <div class="pf-left">
      <img class="pf-avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
      <p class="pf-des">hi,我是写夜子,希望你有愉快的一天.</p>
  </div>

  <div class="pf-right">           
      <div class="pf-links">
        




<span class="donate-btn">
	<span class="iconfont icon-donate"></span>
</span>


<div id="donate-box" class="sildeUpMin">

	<span class="donate-cancel iconfont icon-cancel"></span>

	<div class="donate-img-box">
		<img id="donate-qr-wechat" class="noLazyLoad donate-img" src="/images/donate1.png" alt="No Donate Image!">	
		<img id="donate-qr-alipay" class="noLazyLoad donate-img" src="/images/donate2.png" alt="No Donate Image!">	
	</div>

	<span class="donate-word">世界美好 你也是</span>

	<div class="donate-list">
		<span class="iconfont icon-donate-wechat"></span>
		<span class="iconfont icon-donate-alipay"></span>
	</div>

</div>

 
        
	
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=21d601593a1de"></script>
	
	<span class="share-btn">
	<span class="iconfont icon-share"></span>
	</span>


	<div class="-mob-share sildeUpMin">
		   			             
            <a class="iconfont  icon-share-qq -mob-share-qq"></a>		
     	   			             
            <a class="iconfont  icon-share-weixin -mob-share-weixin"></a>		
     	   			             
            <a class="iconfont  icon-share-weibo -mob-share-weibo"></a>		
     	   			             
            <a class="iconfont  icon-share-douban -mob-share-douban"></a>		
     	   			             
            <a class="iconfont  icon-share-facebook -mob-share-facebook"></a>		
     	   			             
            <a class="iconfont  icon-share-twitter -mob-share-twitter"></a>		
     	   			             
            <a class="iconfont  icon-share-google -mob-share-google"></a>		
     	   
	</div>	

      </div>  
    <nav class="pf-paginator">
      
         
          <a href="/2019/08/23/docker基本知识/" data-hover="docker基本知识">上一篇</a>      
            
        
      
        
        <a href="/2019/07/21/Flutter基本页面布局/" data-hover="Flutter基本页面布局"> 下一篇</a>
            
  </nav>   
  </div>
</div> 
	
	
</article>

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>